<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜狐</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .pcc li{
            margin-bottom: 6px;
        }
        /*#logo-sohu{
            position: relative;
            top:0;
            left: 0;
        }*/
        .clear-fix::after{
            clear: both;
            content: "";
            display: block;

        }
        .clear-fix{
            margin-top: 0;
            margin-bottom: 0;
        
           /*font-size: 10px;*/
           /*background-color: rgb(64,64,64);*/
            
        }
        #first{
            position: relative;
            top: 0px;
            left: 0px;
            border-radius: 9px;

        }
        #second{
            position: relative;
            top: 3px;
            left: 0px;
            /*height: 30px;
            width: 30px;*/
            border-radius: 9px;

        }
        #third{
            position: relative;
            top: 3px;
            left: 0px;
            height: 30px;
            width: 30px;
            border-radius: 9px;

        }

        *{
            box-sizing: border-box;
        }
        body{
            
            margin: 0;
            display: flex;
            background-position: 50% 50%;
        }
        #box{
            width: 2000px;
            height: 1200px;
           
            border: solid 2px black;
            padding: 0px;
           
        }
        #sohu-head{
            line-height: 20px;
           
            /*border: solid 1px black;*/
            /*margin-top: 0px;*/
            display: flex;
            
      
            /*background-color: black;*/
            /*display: flex;
            flex-direction: row;
            justify-content: center;
            /*align-items: center;*/



        }
        p{
             display: inline-block;
             float: right;
             margin: 2px auto;;
             color:rgb(102, 102,102);
             font-size: 14px;

        }
        p:hover{
            color: white;
        }
        .item{
                 
                  /*border: solid 1px red; */
                  line-height: 27px;
                  background-color:rgb(34, 34, 34);
                  color:rgb(64, 64,64);
             
                  

        }

         .item:nth-of-type(1){
             flex-grow: 1;
         }
        .item:nth-of-type(2){
            flex-basis: 1200px;
            flex-grow: 0;
            flex-shrink: 0;
          }
        .item:nth-of-type(3){
            flex-grow: 1;

           }
        #main{
            width: 1200px;
            /*border: solid 1px red; */
            height: 900px;
            margin: 0 auto;
        }
        img{
            position: absolute;
            left: 350px;
        }
         #text{
             border: solid 1px gray; 
             position: absolute;
             top:50px;
             left: 50px;
        }
        #style{
            height: 40px;
            width: 470px;
            position: absolute;
            top:59px;
            left: 590px;
            /*font-size: 19px;*/

        }
        #sub{
            height: 41px;
            width: 80px;
            position: absolute;
            top: 58px;
            left: 1056px;
            background-color: rgb(239, 200, 16);
            background-image: url(7.png);
            background-repeat: no-repeat;
            

        }
        #style:active{
            border: solid 1px yellow; 
        }
        #main .clear-fix{
            float: right;
            margin:20px 15px;
            font-size: 14px;
            color: lightgray;
            text-decoration: none;
            margin-bottom:0px;
        }
        #area{
            margin-top: 95px;
            height: 75px;
            width: 1200px;
            border-top: solid 1px lightgray; 
            border-bottom: solid 1px lightgray;
        }
        #area.boxer{
            margin-top: 30px;
        }
        .boxer span{
            /*display: flex;
            */
        
            float: left;
            height: 45px;
            width: 170px;
            /*border: solid black 1px;*/
            padding: 10px;
            font-size: 14px;
        }
        #sohu-body{
            
           
            /*border: solid 1px black;*/
            margin-top: 25px;
            display: flex;
            float: space-between;
        }
        .pcc{
            /*border:solid 1px green;*/

        }
        .pcc:nth-of-type(1){
            flex-basis: 360px;
            flex-grow: 0;
            flex-shrink: 0;
            height: 600px;
            /*border: solid 1px black; */
        }
        .pcc:nth-of-type(2){
            height: 600px;
            flex-basis: 520px;
            flex-grow: 0;
            flex-shrink: 0;
            /*border: solid 1px black; */
        }
        .pcc:nth-of-type(3){
            flex-basis: 320px;
            height: 600px;
            flex-grow: 0;
            flex-shrink: 0;
            /*border: solid 1px black; */
        }
        #banner{
            
            margin-top: 30px ;
            position: relative;
            top: 0;
            left: 0;
           
        }
        #sohu-body1{
            position: relative;
            top:0px;
            left: 0;
        }
        #sohu-body2{
            position: relative;
            top:2px;
            left: 0;
            margin-top: 4px;
        }
        #sohu-body3{
            position: relative;
            top:0px;
            left: 0px;
        }
        #sohu-body4{
            position: relative;
            top:0px;
            left: 0px;
        }
        #sohu-body5{
            position: relative;
            top:0px;
            left: 0px;
        }
        .pcc{
            font-size: 16px;
            color: black;
            float: left;
            
        }
        
        .ime{
            width: 300px;
            height: 100px;
            border: solid 1px lightgray; 
           display: block;
           margin-bottom: 8px;
           
        }
        .iee{
           
            width: 300px;
            height: 20px;
            display: flex;
            /*border: 1px solid gray;*/
            justify-content: center;
            
        }
        #right{
            font-size: 14px;
            color:blue;
        }
        #img1{
            height: 27px;
            width: 27px;
            position: relative;
            top:5px;
            left: 12px;
            border-radius: 50%;
        }
        #img2{
            height: 27px;
            widows: 27px;
        }
        #yue{
            font-size: 12px;
            color: lightgray;
        }
        #yue1{
            font-size: 12px;
            color: black;
        }
        #chatu{
            position: relative;
            top: 0;
            left: 0px;
        }
        .boxer{
            /*height: px;*/
            width: 156px;
            /*border: solid 1px black;*/
            text-align: center;
            font-size: 14px;
            display: inline-block;
            
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="sohu-head">
            <img src="logo.png" alt="" id="logo-sohu">
            <span class="item"></span>
            <span class="item">
                <p><span class="fa fa-user-o">&nbsp;&nbsp;登录狐友</span></p>
                <p>&nbsp;&nbsp;下载APP&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</p>
                <p>致老用户的一封信&nbsp;&nbsp;&nbsp;|</p>
            </span>
            <span class="item"></span>
            
    
        </div>
        <div id="main">
           
            <span><input type="text" id="style" placeholder="大家都在搜:美机场险酿惊天空难"></span>
            <span><input type="submit" id="sub"  value=""></span>

            <div class="clear-fix">
                <img src="pic1.png" alt="" id="first">&nbsp;&nbsp;搜狐号&nbsp;&nbsp;&nbsp;&nbsp;|
                <img src="pic2.png" alt="" id="second">搜狗搜索&nbsp;&nbsp;&nbsp;&nbsp;| 
                <img src="pic3.png" alt="" id="third">&nbsp;&nbsp;搜狐邮箱&nbsp;&nbsp;
            </div>
            
            <div id="area" class="boxer">
                <span>
                   &nbsp;新闻&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;军事&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;社会 <br><br>&nbsp;财经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宏观&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;理财
                    
                </span>
                <span>
                    体育&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NBA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CBA<br><br>房产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二手房&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家居
                </span>
                <span>
                    娱乐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;视频&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;美剧<br><br>汽车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车贷&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车型
                </span>
                <span>
                    时尚&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旅游&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;母婴<br><br>科技&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;教育&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;健康
                </span>
                <span>
                    美食&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文化&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历史<br><br>星座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;动漫&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游戏
                </span>
                <span>
                    邮箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浏览器&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;博客<br><br>地图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;输入法&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;快站
                </span>
                <span>
                    千帆&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微门户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;看房<br><br>畅游&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;17173&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手游
                </span>

            </div>

            <img src="banner.jpg" alt="" id="banner">
            

            <div id="sohu-body">
                <span class="pcc">
                    <img src="sohu-body1.jpg" alt="" id="sohu-body1">
                    
                        <div class="boxer">
                            <img src="sohu-body2.jpg" alt="" id="sohu-body2">
                            这种事她也直播？这些画风清奇的直播达人们
                        </div>
                        <div class="boxer">
                            <img src="sohu-body3.jpg" alt="" id="sohu-body3">
                            美国空军公布罕见照片&nbsp;场面震撼似大片
                        </div>
                        <div class="boxer">
                         <img src="sohu-body4.jpg" alt="" id="sohu-body4">
                         今天天气好晴朗&nbsp;处处好风光
                        </div>
                        <div class="boxer">
                          <img src="sohu-body5.jpg" alt="" id="sohu-body5" >
                          小丫么小二郎&nbsp;背着那书包上学堂
                        </div>
                   
                </span>
                <span class="pcc">
                    <ul>
                        <li>习近平接受八国新驻华大使递交国书&nbsp;&nbsp;|&nbsp; 砥砺奋进的五年</li>
                        
                        <li>习近平对司法体制改革有所指示引热烈反响&nbsp;&nbsp;|&nbsp;改革方法论&nbsp;&nbsp;|专题</li>
                        
                        <li>李克强主持召开国务院常务会议&nbsp;&nbsp;|&nbsp;李克强陕西考察的五个瞬间</li>
                    </ul>
                    <ul>
                        <li><strong>广西南宁的这个女科长&nbsp;&nbsp;贪的钱比52只大老虎都多</strong></li>
                        
                        <li>商会乱收费调查：有企业被迫参加6家协会&nbsp;每年会费20多万</li>
                       
                        <li>河南12岁女孩遭强奸案续&nbsp;:涉事老师称会慢慢原谅孩子</li>
                        
                        <li>美国联邦检察官办公室发布公告&nbsp;:相信章莹颖已经死亡</li>
                       
                        <li>贾岳亭下周将回国 &nbsp;此次赴美已敲定FF汽车新策略</li>
                        
                        <li>"葛宇路"被拆除&nbsp;有市民专程来拍照留念&nbsp;:永远活在我们心中</li>
                    </ul>
                    <ul>
                        <li><strong>广电总局&nbsp;：电视台严禁播出虚假广告&nbsp;&nbsp;该停播的坚决停播</strong></li>
                        <li>从害羞的神学夹到嗜血屠夫&nbsp;ISIS头目巴格达迪的诡异人生</li>
                        <li>她因吵架致老公猝死内疚崩溃&nbsp;2月后竟和老公弟弟秀恩爱</li>
                        <li>美国男子同时向女友及其患病妹妹“求婚”结局好暖心</li>
                        <li>保监会副主席nbsp;:个别激进公司快速扩张&nbsp;隐藏的风险逐步暴露</li>
                        <li>日本"黑寡妇"连杀数任丈夫&nbsp;认罪2天后口称不记得</li>
                    </ul>
                     <ul>
                        <li><strong>广电总局&nbsp;：电视台严禁播出虚假广告&nbsp;&nbsp;该停播的坚决停播</strong></li>
                        <li>从害羞的神学夹到嗜血屠夫&nbsp;ISIS头目巴格达迪的诡异人生</li>
                        <li>她因吵架致老公猝死内疚崩溃&nbsp;2月后竟和老公弟弟秀恩爱</li>
                        <li>美国男子同时向女友及其患病妹妹“求婚”结局好暖心</li>
                        <li>保监会副主席nbsp;:个别激进公司快速扩张&nbsp;隐藏的风险逐步暴露</li>
                        <li>日本"黑寡妇"连杀数任丈夫&nbsp;认罪2天后口称不记得</li>
                    </ul>
                </span>
                <span class="pcc">
                    <div class="iee">
                        <p id="left" >搜狐号</p>
                        <p id="right">换一换</p>
                    </div>
                    <span class="ime">
                        <img src="first.jpg" alt="" id="img1">&nbsp;&nbsp;&nbsp;&nbsp;
                        <span id="yue1">新华社</span>
                        &nbsp;&nbsp;&nbsp;
                        <span id="yue">|&nbsp;&nbsp;阅读数&nbsp;5亿</span><br>
                        <span>我国科学家探测到一批8亿年宇宙年龄的星系</span>

                    </span>
                    <span class="ime">
                         <img src="second.png" alt="" id="img1">&nbsp;&nbsp;&nbsp;&nbsp;
                        <span id="yue1">上游新闻</span>
                        &nbsp;&nbsp;&nbsp;
                        <span id="yue">|&nbsp;&nbsp;阅读数&nbsp;1.6亿</span><br>
                        <span>国学课&nbsp;|&nbsp;这些美而动听的词牌名，它们出现的就很优雅</span>
                    </span>
                    <span class="ime">
                         <img src="third.jpg" alt="" id="img1">&nbsp;&nbsp;&nbsp;&nbsp;
                        <span id="yue1">红星新闻</span>
                        &nbsp;&nbsp;&nbsp;
                        <span id="yue">|&nbsp;&nbsp;阅读数&nbsp;1.5亿</span><br>
                        <span>捡废品养病母&nbsp;河北684分农村考生被清华降分录取</span>
                    </span>
                    <span class="ime">
                        <img src="forth.jpg" alt="" id="img1">&nbsp;&nbsp;&nbsp;&nbsp;
                        <span id="yue1">国际在线</span>
                        &nbsp;&nbsp;&nbsp;
                        <span id="yue">|&nbsp;&nbsp;阅读数&nbsp;15亿</span><br>
                        <span>中方愿意继续同菲方通过对话协商妥善处理涉海问题</span>
                    </span>
                    <span><img src="fifth.jpg" alt="" id="chatu"></span>
                </span>
            </div>
    
        </div>
    </div>
</body>
</html>